<template>
  <div class="http-log-detail bg-red-100 flex flex-col">
    <el-card class="mb-4">
      <template #header>
        <div class="card-header">
          <span>请求详情</span>
        </div>
      </template>
      <div v-if="requestBean">
        <p><strong>URL:</strong> {{ requestBean?.url }}</p>
        <p><strong>方法:</strong> {{ requestBean?.method }}</p>
        <p><strong>头部:</strong></p>
        <ul>
          <li v-for="(value, key) in requestBean.headers" :key="key">
            <strong>{{ key }}:</strong> {{ value }}
          </li>
        </ul>
        <p><strong>请求体:</strong></p>
        <!-- <pre
          class="max-h-[300px] min-h-[100px] width-[100%] overflow-y-auto"
          style="white-space: pre-wrap; word-break: break-all"
          >{{ reqBody }}</pre
        > -->
        <JsonViewer :value="reqBody" class="max-h-[300px] min-h-[100px] overflow-y-auto" />
      </div>
      <div v-else>无请求数据</div>
    </el-card>

    <el-card class="mb-4">
      <template #header>
        <div class="card-header">
          <span>响应详情</span>
        </div>
      </template>
      <div v-if="responseBean">
        <p><strong>状态码:</strong> {{ responseBean?.statusCode }}</p>
        <p><strong>头部:</strong></p>
        <ul>
          <li v-for="(value, key) in responseBean.headers" :key="key">
            <strong>{{ key }}:</strong> {{ value }}
          </li>
        </ul>
        <p><strong>响应体:</strong></p>
        <el-button @click="copyResponseBody" class="mb-2 bg-blue-500 text-white">复制</el-button>
        <!-- <pre
          class="max-h-[300px] min-h-[100px] overflow-y-auto"
          style="white-space: pre-wrap; word-break: break-all"
          >{{ resBody }}</pre
        > -->
        <JsonViewer :value="resBody" class="max-h-[300px] min-h-[100px] overflow-y-auto" />
      </div>
      <div v-else>无响应数据</div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElCard, ElMessage } from 'element-plus';
import type { RequestBean, ResponseBean } from '@/beans/http_log_bean';
import useClipboard from 'vue-clipboard3';

const requestBean = ref<RequestBean | null>(null);
const responseBean = ref<ResponseBean | null>(null);
const { toClipboard } = useClipboard();
const reqBody = ref('');
const resBody = ref('');

function setRequestBean(bean: RequestBean) {
  requestBean.value = bean;
  reqBody.value = bean.body;
}

function setResponseBean(bean: ResponseBean) {
  responseBean.value = bean;
  resBody.value = bean.body;
}

function copyResponseBody() {
  if (responseBean.value) {
    toClipboard(responseBean.value.body.toString());
    ElMessage.success('响应体已复制到剪贴板');
  }
}

// onMounted(() => {
//   console.log('requestBean', requestBean.value);
//   console.log('responseBean', responseBean.value);
//   requestBean.value = {
//     url: 'https://www.baidu.com',
//     method: 'GET',
//     headers: {
//       'Content-Type': 'application/json',
//     },
//     body: JSON.stringify({ name: 'John' }),
//     id: '1',
//     createTime: new Date(),
//     toJson: () => ({}),
//   };
//   responseBean.value = {
//     id: '1',
//     createTime: new Date(),
//     statusCode: 200,
//     headers: {
//       'Content-Type': 'application/json',
//     },
//     body: JSON.stringify({ name: 'John' }),
//     toJson: () => ({}),
//   };
//   setRequestBean(requestBean.value);
//   setResponseBean(responseBean.value);
// });

defineExpose({
  setRequestBean,
  setResponseBean,
});
</script>

<style scoped>
.http-log-detail {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mb-4 {
  margin-bottom: 1rem;
}
</style>
